<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星澜播放器 StarWave Player</title>
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#1a1a2e">
    
    <!-- 国内CDN资源 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    
    <style>
        :root {
            --primary-bg: #0f0f23;
            --secondary-bg: #1a1a2e;
            --accent-color: #16213e;
            --text-primary: #ffffff;
            --text-secondary: #b3b3b3;
            --border-color: #333;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--primary-bg);
            color: var(--text-primary);
            overflow-x: hidden;
        }
        
        .player-container {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .video-wrapper {
            position: relative;
            background: #000;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }
        
        video {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .controls-panel {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            padding: 20px;
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        
        .controls-panel.hidden {
            opacity: 0;
            pointer-events: none;
        }
        
        .url-inputs {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .url-row {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .url-input {
            flex: 1;
            padding: 12px;
            background: var(--secondary-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 14px;
        }
        
        .url-input:focus {
            outline: none;
            border-color: #007bff;
        }
        
        .btn {
            padding: 12px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            background: #0056b3;
            transform: translateY(-1px);
        }
        
        .btn-secondary {
            background: var(--accent-color);
        }
        
        .btn-secondary:hover {
            background: #0f3460;
        }
        
        .playlist {
            background: var(--secondary-bg);
            border-radius: 8px;
            padding: 15px;
            margin-top: 10px;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .playlist-item {
            padding: 8px 12px;
            margin: 4px 0;
            background: var(--accent-color);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .playlist-item:hover {
            background: #007bff;
            transform: translateX(5px);
        }
        
        .playlist-item.active {
            background: #007bff;
            border-left: 3px solid #00ff88;
        }
        
        .filter-panel {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--secondary-bg);
            border-radius: 12px;
            padding: 20px;
            min-width: 250px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
            z-index: 1000;
        }
        
        .filter-item {
            margin: 10px 0;
        }
        
        .filter-item label {
            display: block;
            margin-bottom: 5px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .filter-item input[type="range"] {
            width: 100%;
            height: 4px;
            background: var(--border-color);
            border-radius: 2px;
            outline: none;
        }
        
        .filter-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-top: 15px;
        }
        
        .filter-btn {
            padding: 8px 12px;
            background: var(--accent-color);
            border: none;
            border-radius: 6px;
            color: var(--text-primary);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .filter-btn:hover {
            background: #007bff;
        }
        
        .filter-btn.active {
            background: #007bff;
        }
        
        .history-panel {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--secondary-bg);
            border-radius: 8px;
            padding: 12px;
            min-width: 220px;
            max-height: 300px;
            overflow-y: auto;
            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
            z-index: 1000;
        }
        
        .history-item {
            padding: 10px;
            margin: 5px 0;
            background: var(--accent-color);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 13px;
        }
        
        .history-item:hover {
            background: #007bff;
        }
        
        .download-panel {
            position: absolute;
            bottom: 70px;
            left: 20px;
            background: var(--secondary-bg);
            border-radius: 8px;
            padding: 10px;
            min-width: 180px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
            z-index: 1000;
        }
        
        .progress-bar {
            width: 100%;
            height: 4px;
            background: var(--border-color);
            border-radius: 2px;
            overflow: hidden;
            margin: 10px 0;
        }
        
        .progress-fill {
            height: 100%;
            background: #007bff;
            transition: width 0.3s ease;
        }
        
        .screen-controls {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-top: 10px;
        }
        
        .screen-btn {
            padding: 8px 12px;
            background: var(--accent-color);
            border: none;
            border-radius: 6px;
            color: var(--text-primary);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .screen-btn:hover {
            background: #007bff;
        }
        
        .plugin-panel {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--secondary-bg);
            border-radius: 8px;
            padding: 15px;
            min-width: 280px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.5);
            z-index: 2000;
        }
        
        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
            cursor: pointer;
        }
        
        .close-btn:hover {
            color: var(--text-primary);
        }
        
        @media (max-width: 768px) {
            .player-container {
                padding: 10px;
            }
            
            .url-row {
                flex-direction: column;
            }
            
            .filter-panel,
            .history-panel,
            .download-panel {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 90%;
                max-width: 350px;
            }
        }
        
        .hidden {
            display: none;
        }
        
        .fade-in {
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="player-container">
        <h1 class="text-3xl font-bold text-center mb-6 bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent">
            星澜播放器 StarWave Player
        </h1>
        
        <!-- URL输入区域 -->
        <div class="url-inputs">
            <!-- 第一行：单条URL播放 -->
            <div class="url-row">
                <input type="text" id="singleUrl" class="url-input" placeholder="输入视频URL直接播放 (支持http/https/m3u8/mp4等格式)">
                <button class="btn" onclick="playSingleUrl()">
                    <i class="fas fa-play"></i> 播放
                </button>
                <button class="btn btn-secondary" onclick="loadLocalFile()">
                    <i class="fas fa-folder-open"></i> 本地视频
                </button>
                <button class="btn btn-secondary" onclick="loadLocalMusic()">
                    <i class="fas fa-music"></i> 本地音乐
                </button>
            </div>
            
            <!-- 第二行：批量URL列表 -->
            <div class="url-row">
                <input type="text" id="batchUrl" class="url-input" placeholder="输入批量视频URL (每行一个)">
                <button class="btn" onclick="addToPlaylist()">
                    <i class="fas fa-plus"></i> 添加到列表
                </button>
                <button class="btn btn-secondary" onclick="clearPlaylist()">
                    <i class="fas fa-trash"></i> 清空
                </button>
            </div>
            <div id="playlist" class="playlist hidden"></div>
            
            <!-- 第三行：搜索跳转 -->
            <div class="url-row">
                <input type="text" id="searchQuery" class="url-input" placeholder="输入搜索关键词">
                <button class="btn" onclick="searchBaidu()">
                    <i class="fab fa-baidu"></i> 百度搜索
                </button>
                <button class="btn btn-secondary" onclick="searchEdge()">
                    <i class="fab fa-edge"></i> Edge搜索
                </button>
                <button class="btn btn-secondary" onclick="toggleMusicRankPanel()">
                    <i class="fas fa-music"></i> 音乐榜单
                </button>
            </div>
        </div>
        
        <!-- 视频播放区域 -->
        <div class="video-wrapper">
            <video id="videoPlayer" controls>
                <source src="" type="video/mp4">
                您的浏览器不支持视频播放
            </video>
            <audio id="audioPlayer" controls class="hidden">
                <source src="" type="audio/mpeg">
                您的浏览器不支持音频播放
            </audio>
            
            <!-- 控制面板 -->
            <div class="controls-panel" id="controlsPanel">
                <div class="flex justify-between items-center mb-4">
                    <div class="flex gap-2">
                        <button class="btn" onclick="toggleFilterPanel()">
                            <i class="fas fa-palette"></i> 滤镜
                        </button>
                        <button class="btn" onclick="toggleHistoryPanel()">
                            <i class="fas fa-history"></i> 历史
                        </button>
                        <button class="btn" onclick="toggleDownloadPanel()">
                            <i class="fas fa-download"></i> 下载
                        </button>
                        <button class="btn" onclick="togglePluginPanel()">
                            <i class="fas fa-plug"></i> 插件
                        </button>
                    </div>
                    
                    <div class="screen-controls">
                        <button class="screen-btn" onclick="setAspectRatio('16:9')">16:9</button>
                        <button class="screen-btn" onclick="setAspectRatio('4:3')">4:3</button>
                        <button class="screen-btn" onclick="toggleFullscreen()">
                            <i class="fas fa-expand"></i>
                        </button>
                    </div>
                </div>
                
                <div class="flex justify-between items-center">
                    <div class="flex gap-2">
                        <button class="btn" onclick="seekVideo(-5)">
                            <i class="fas fa-backward"></i> -5秒
                        </button>
                        <button class="btn" onclick="seekVideo(5)">
                            <i class="fas fa-forward"></i> +5秒
                        </button>
                    </div>
                    
                    <select id="qualitySelect" class="url-input" style="width: auto;" onchange="changeQuality()">
                        <option value="auto">自动清晰度</option>
                        <option value="240">240P</option>
                        <option value="480">480P</option>
                        <option value="720">720P</option>
                        <option value="1080">1080P</option>
                        <option value="2k">2K</option>
                        <option value="4k">4K</option>
                        <option value="8k">8K</option>
                        <option value="16k">16K</option>
                    </select>
                    
                    <select id="audioTrack" class="url-input" style="width: auto;" onchange="changeAudioTrack()">
                        <option value="0">默认声道</option>
                        <option value="1">左声道</option>
                        <option value="2">右声道</option>
                        <option value="3">立体声</option>
                    </select>
                </div>
            </div>
        </div>
        
        <!-- 滤镜面板 -->
        <div id="filterPanel" class="filter-panel hidden">
            <button class="close-btn" onclick="toggleFilterPanel()">&times;</button>
            <h3 class="text-lg font-bold mb-4">视频滤镜</h3>
            
            <div class="filter-buttons">
                <button class="filter-btn" onclick="applyFilter('grayscale')">黑白</button>
                <button class="filter-btn" onclick="applyFilter('sepia')">怀旧</button>
                <button class="filter-btn" onclick="applyFilter('invert')">反色</button>
                <button class="filter-btn" onclick="applyFilter('brightness')">亮度</button>
                <button class="filter-btn" onclick="applyFilter('contrast')">对比度</button>
                <button class="filter-btn" onclick="applyFilter('saturate')">鲜艳</button>
                <button class="filter-btn" onclick="applyFilter('hue-rotate')">色相</button>
                <button class="filter-btn" onclick="applyFilter('blur')">模糊</button>
                <button class="filter-btn" onclick="applyFilter('cold')">冷色系</button>
                <button class="filter-btn" onclick="applyFilter('warm')">暖色系</button>
                <button class="filter-btn" onclick="resetFilter()">重置</button>
            </div>
            
            <div class="filter-item">
                <label>亮度调节</label>
                <input type="range" id="brightnessSlider" min="0" max="200" value="100" oninput="adjustBrightness(this.value)">
            </div>
            
            <div class="filter-item">
                <label>对比度调节</label>
                <input type="range" id="contrastSlider" min="0" max="200" value="100" oninput="adjustContrast(this.value)">
            </div>
        </div>
        
        <!-- 历史记录面板 -->
        <div id="historyPanel" class="history-panel hidden">
            <button class="close-btn" onclick="toggleHistoryPanel()">&times;</button>
            <h3 class="text-lg font-bold mb-4">播放历史</h3>
            <div id="historyList"></div>
            <button class="btn w-full mt-4" onclick="clearHistory()">
                <i class="fas fa-trash"></i> 清空历史记录
            </button>
        </div>
        
        <!-- 下载面板 -->
        <div id="downloadPanel" class="download-panel hidden">
            <button class="close-btn" onclick="toggleDownloadPanel()">&times;</button>
            <h3 class="text-lg font-bold mb-4">下载工具箱</h3>
            <button class="btn w-full mb-2" onclick="downloadWithCatCatch()">
                <i class="fas fa-download"></i> 使用 Cat-Catch 下载
            </button>
            <button class="btn w-full mb-2" onclick="downloadVideo()">
                <i class="fas fa-file-video"></i> 下载当前视频
            </button>
            <div class="progress-bar">
                <div id="downloadProgress" class="progress-fill" style="width: 0%"></div>
            </div>
        </div>
        
        <!-- 插件面板 -->
        <div id="pluginPanel" class="plugin-panel hidden">
            <button class="close-btn" onclick="togglePluginPanel()">&times;</button>
            <h3 class="text-lg font-bold mb-4">插件管理</h3>
            <div class="mb-4">
                <label class="block mb-2">已安装插件</label>
                <div id="installedPlugins">
                    <div class="playlist-item">Cat-Catch 视频下载器</div>
                </div>
            </div>
            <div>
                <label class="block mb-2">添加新插件</label>
                <input type="text" id="pluginUrl" class="url-input mb-2" placeholder="输入插件URL">
                <button class="btn w-full" onclick="installPlugin()">
                    <i class="fas fa-plus"></i> 安装插件
                </button>
            </div>
        </div>

        <!-- APP下载面板 -->
        <div id="appDownloadPanel" class="plugin-panel hidden">
            <button class="close-btn" onclick="toggleAppDownloadPanel()">&times;</button>
            <h3 class="text-lg font-bold mb-4">下载星澜播放器APP</h3>
            
            <div class="mb-4">
                <h4 class="text-md font-semibold mb-2">Android版本</h4>
                <button class="btn w-full mb-2" onclick="downloadAndroidApp()">
                    <i class="fab fa-android"></i> Android APK 下载
                </button>
                <p class="text-xs text-gray-400 mb-2">支持Android 7.0+，文件大小：15MB</p>
            </div>
            
            <div class="mb-4">
                <h4 class="text-md font-semibold mb-2">iOS版本</h4>
                <button class="btn w-full mb-2" onclick="downloadIOSApp()">
                    <i class="fab fa-apple"></i> iOS App Store
                </button>
                <p class="text-xs text-gray-400 mb-2">支持iOS 12.0+，文件大小：18MB</p>
            </div>
            
            <div class="mb-4">
                <h4 class="text-md font-semibold mb-2">Windows版本</h4>
                <button class="btn w-full mb-2" onclick="downloadWindowsApp()">
                    <i class="fab fa-windows"></i> Windows 客户端
                </button>
                <p class="text-xs text-gray-400 mb-2">支持Windows 10/11，文件大小：25MB</p>
            </div>
            
            <div class="mb-4">
                <h4 class="text-md font-semibold mb-2">Mac版本</h4>
                <button class="btn w-full mb-2" onclick="downloadMacApp()">
                    <i class="fab fa-apple"></i> macOS 客户端
                </button>
                <p class="text-xs text-gray-400 mb-2">支持macOS 10.15+，文件大小：22MB</p>
            </div>
            
            <div class="border-t pt-4">
                <h4 class="text-md font-semibold mb-2">直接安装</h4>
                <button class="btn w-full mb-2" onclick="installPWA()">
                    <i class="fas fa-plus-square"></i> 安装为PWA应用
                </button>
                <p class="text-xs text-gray-400">无需下载，一键安装到桌面</p>
            </div>
        </div>

        <!-- 音乐榜单面板 -->
        <div id="musicRankPanel" class="plugin-panel hidden">
            <button class="close-btn" onclick="toggleMusicRankPanel()">&times;</button>
            <h3 class="text-lg font-bold mb-4">🔥 热门音乐榜单</h3>
            
            <div class="mb-4">
                <h4 class="text-md font-semibold mb-2 text-blue-400">🎵 网易云音乐热歌榜</h4>
                <div id="neteaseRank" class="space-y-2"></div>
            </div>
            
            <div class="mb-4">
                <h4 class="text-md font-semibold mb-2 text-green-400">🎵 QQ音乐巅峰榜</h4>
                <div id="qqmusicRank" class="space-y-2"></div>
            </div>
            
            <div class="mb-4">
                <h4 class="text-md font-semibold mb-2 text-red-400">🎵 酷狗音乐飙升榜</h4>
                <div id="kugouRank" class="space-y-2"></div>
            </div>
            
            <div class="mb-4">
                <h4 class="text-md font-semibold mb-2 text-purple-400">🎵 抖音热歌榜</h4>
                <div id="douyinRank" class="space-y-2"></div>
            </div>
            
            <div class="border-t pt-4">
                <button class="btn w-full mb-2" onclick="refreshMusicRank()">
                    <i class="fas fa-sync-alt"></i> 刷新榜单
                </button>
                <p class="text-xs text-gray-400">数据来源：各大音乐平台实时榜单</p>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let currentFilter = '';
        let playlist = [];
        let currentPlaylistIndex = 0;
        let history = JSON.parse(localStorage.getItem('videoHistory') || '[]');
        let hideControlsTimeout;

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadHistory();
            setupVideoEvents();
            setupAutoHide();
        });

        // 视频播放功能
        function playSingleUrl() {
            const url = document.getElementById('singleUrl').value.trim();
            if (url) {
                playVideo(url);
                addToHistory(url);
            }
        }

        function playVideo(url) {
            const video = document.getElementById('videoPlayer');
            const audio = document.getElementById('audioPlayer');
            
            // 判断是音频还是视频
            if (isAudioFile(url)) {
                video.classList.add('hidden');
                audio.classList.remove('hidden');
                audio.src = url;
                audio.load();
                audio.play().catch(e => {
                    console.error('音频播放失败:', e);
                    alert('音频加载失败，请检查URL格式');
                });
            } else {

        // 播放列表功能
        function addToPlaylist() {
            const urlInput = document.getElementById('batchUrl');
            const urls = urlInput.value.trim().split('\n').filter(url => url.trim());
            
            if (urls.length > 0) {
                playlist.push(...urls);
                renderPlaylist();
                urlInput.value = '';
                document.getElementById('playlist').classList.remove('hidden');
            }
        }

        function renderPlaylist() {
            const playlistDiv = document.getElementById('playlist');
            playlistDiv.innerHTML = '';
            
            playlist.forEach((url, index) => {
                const item = document.createElement('div');
                item.className = `playlist-item ${index === currentPlaylistIndex ? 'active' : ''}`;
                item.textContent = url.length > 50 ? url.substring(0, 50) + '...' : url;
                item.onclick = () => playPlaylistItem(index);
                playlistDiv.appendChild(item);
            });
        }

        function playPlaylistItem(index) {
            if (index >= 0 && index < playlist.length) {
                currentPlaylistIndex = index;
                playVideo(playlist[index]);
                addToHistory(playlist[index]);
                renderPlaylist();
            }
        }

        function playNext() {
            if (currentPlaylistIndex < playlist.length - 1) {
                playPlaylistItem(currentPlaylistIndex + 1);
            }
        }

        function playPrevious() {
            if (currentPlaylistIndex > 0) {
                playPlaylistItem(currentPlaylistIndex - 1);
            }
        }

        function clearPlaylist() {
            playlist = [];
            currentPlaylistIndex = 0;
            document.getElementById('playlist').classList.add('hidden');
        }

        // 搜索功能
        function searchBaidu() {
            const query = document.getElementById('searchQuery').value.trim();
            if (query) {
                window.open(`https://www.baidu.com/s?wd=${encodeURIComponent(query)}`, '_blank');
            }
        }

        function searchEdge() {
            const query = document.getElementById('searchQuery').value.trim();
            if (query) {
                window.open(`https://www.bing.com/search?q=${encodeURIComponent(query)}`, '_blank');
            }
        }

        // 滤镜功能
        function toggleFilterPanel() {
            const panel = document.getElementById('filterPanel');
            panel.classList.toggle('hidden');
            closeOtherPanels('filterPanel');
        }

        function applyFilter(filterType) {
            const video = document.getElementById('videoPlayer');
            let filterValue = '';
            
            switch(filterType) {
                case 'grayscale':
                    filterValue = 'grayscale(100%)';
                    break;
                case 'sepia':
                    filterValue = 'sepia(100%)';
                    break;
                case 'invert':
                    filterValue = 'invert(100%)';
                    break;
                case 'brightness':
                    filterValue = 'brightness(150%)';
                    break;
                case 'contrast':
                    filterValue = 'contrast(150%)';
                    break;
                case 'saturate':
                    filterValue = 'saturate(200%)';
                    break;
                case 'hue-rotate':
                    filterValue = 'hue-rotate(90deg)';
                    break;
                case 'blur':
                    filterValue = 'blur(2px)';
                    break;
                case 'cold':
                    filterValue = 'hue-rotate(180deg) saturate(120%)';
                    break;
                case 'warm':
                    filterValue = 'hue-rotate(30deg) saturate(120%)';
                    break;
            }
            
            video.style.filter = filterValue;
            currentFilter = filterValue;
        }

        function resetFilter() {
            const video = document.getElementById('videoPlayer');
            video.style.filter = '';
            currentFilter = '';
            document.getElementById('brightnessSlider').value = 100;
            document.getElementById('contrastSlider').value = 100;
        }

        function adjustBrightness(value) {
            const video = document.getElementById('videoPlayer');
            const currentFilter = video.style.filter || '';
            const brightnessFilter = `brightness(${value}%)`;
            
            // 移除现有的brightness滤镜
            const newFilter = currentFilter.replace(/brightness\([^)]*\)/g, '').trim();
            video.style.filter = newFilter ? `${newFilter} ${brightnessFilter}` : brightnessFilter;
        }

        function adjustContrast(value) {
            const video = document.getElementById('videoPlayer');
            const currentFilter = video.style.filter || '';
            const contrastFilter = `contrast(${value}%)`;
            
            // 移除现有的contrast滤镜
            const newFilter = currentFilter.replace(/contrast\([^)]*\)/g, '').trim();
            video.style.filter = newFilter ? `${newFilter} ${contrastFilter}` : contrastFilter;
        }

        // 历史记录功能
        function toggleHistoryPanel() {
            const panel = document.getElementById('historyPanel');
            panel.classList.toggle('hidden');
            closeOtherPanels('historyPanel');
            loadHistory();
        }

        function addToHistory(url) {
            // 去重
            history = history.filter(item => item !== url);
            history.unshift(url);
            
            // 限制历史记录数量
            if (history.length > 100) {
                history = history.slice(0, 100);
            }
            
            localStorage.setItem('videoHistory', JSON.stringify(history));
            loadHistory();
        }

        function loadHistory() {
            const historyList = document.getElementById('historyList');
            historyList.innerHTML = '';
            
            history.forEach((url, index) => {
                const item = document.createElement('div');
                item.className = 'history-item';
                item.textContent = url.length > 60 ? url.substring(0, 60) + '...' : url;
                item.onclick = () => {
                    playVideo(url);
                    toggleHistoryPanel();
                };
                historyList.appendChild(item);
            });
        }

        function clearHistory() {
            history = [];
            localStorage.removeItem('videoHistory');
            loadHistory();
        }

        // 下载功能
        function toggleDownloadPanel() {
            const panel = document.getElementById('downloadPanel');
            panel.classList.toggle('hidden');
            closeOtherPanels('downloadPanel');
        }

        function downloadWithCatCatch() {
            // 模拟Cat-Catch插件下载
            const url = document.getElementById('videoPlayer').src;
            if (url) {
                alert('正在使用Cat-Catch插件分析视频...');
                // 这里可以集成实际的Cat-Catch插件
                simulateDownload();
            }
        }

        function downloadVideo() {
            const url = document.getElementById('videoPlayer').src;
            if (url) {
                const a = document.createElement('a');
                a.href = url;
                a.download = 'video.mp4';
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
        }

        function simulateDownload() {
            let progress = 0;
            const progressBar = document.getElementById('downloadProgress');
            
            const interval = setInterval(() => {
                progress += Math.random() * 10;
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(interval);
                    alert('下载完成！');
                }
                progressBar.style.width = progress + '%';
            }, 200);
        }

        // 插件功能
        function togglePluginPanel() {
            const panel = document.getElementById('pluginPanel');
            panel.classList.toggle('hidden');
            closeOtherPanels('pluginPanel');
        }

        function installPlugin() {
            const pluginUrl = document.getElementById('pluginUrl').value.trim();
            if (pluginUrl) {
                alert(`正在安装插件: ${pluginUrl}`);
                // 这里可以实现实际的插件安装逻辑
                document.getElementById('pluginUrl').value = '';
            }
        }

        // 播放控制
        function seekVideo(seconds) {
            const video = document.getElementById('videoPlayer');
            const audio = document.getElementById('audioPlayer');
            
            if (!audio.classList.contains('hidden')) {
                audio.currentTime += seconds;
            } else {
                video.currentTime += seconds;
            }
        }

        function changeQuality() {
            const quality = document.getElementById('qualitySelect').value;
            const video = document.getElementById('videoPlayer');
            
            if (quality !== 'auto') {
                // 这里可以实现实际的清晰度切换逻辑
                console.log('切换到清晰度:', quality);
            }
        }

        function changeAudioTrack() {
            const track = document.getElementById('audioTrack').value;
            const video = document.getElementById('videoPlayer');
            
            // 声道切换逻辑
            if (track === '1') {
                video.style.webkitClipPath = 'polygon(0 0, 50% 0, 50% 100%, 0 100%)';
            } else if (track === '2') {
                video.style.webkitClipPath = 'polygon(50% 0, 100% 0, 100% 100%, 50% 100%)';
            } else {
                video.style.webkitClipPath = 'none';
            }
        }

        // 屏幕控制
        function setAspectRatio(ratio) {
            const video = document.getElementById('videoPlayer');
            const wrapper = document.querySelector('.video-wrapper');
            
            switch(ratio) {
                case '16:9':
                    wrapper.style.aspectRatio = '16/9';
                    break;
                case '4:3':
                    wrapper.style.aspectRatio = '4/3';
                    break;
                default:
                    wrapper.style.aspectRatio = 'auto';
            }
        }

        function toggleFullscreen() {
            const video = document.querySelector('.video-wrapper');
            
            if (!document.fullscreenElement) {
                video.requestFullscreen().catch(err => {
                    console.error('全屏失败:', err);
                });
            } else {
                document.exitFullscreen();
            }
        }

        // 自动隐藏控制面板
        function setupAutoHide() {
            const video = document.getElementById('videoPlayer');
            const controls = document.getElementById('controlsPanel');
            
            function showControls() {
                controls.classList.remove('hidden');
                clearTimeout(hideControlsTimeout);
                hideControlsTimeout = setTimeout(() => {
                    if (!video.paused) {
                        controls.classList.add('hidden');
                    }
                }, 5000);
            }
            
            video.addEventListener('mousemove', showControls);
            video.addEventListener('mouseleave', () => {
                if (!video.paused) {
                    hideControlsTimeout = setTimeout(() => {
                        controls.classList.add('hidden');
                    }, 5000);
                }
            });
            
            video.addEventListener('play', showControls);
            video.addEventListener('pause', () => {
                controls.classList.remove('hidden');
                clearTimeout(hideControlsTimeout);
            });
        }

        // 关闭其他面板
        function closeOtherPanels(exceptPanel) {
            const panels = ['filterPanel', 'historyPanel', 'downloadPanel', 'pluginPanel', 'appDownloadPanel', 'musicRankPanel'];
            panels.forEach(panel => {
                if (panel !== exceptPanel) {
                    document.getElementById(panel).classList.add('hidden');
                }
            });
        }

        // APP下载功能
        function toggleAppDownloadPanel() {
            const panel = document.getElementById('appDownloadPanel');
            panel.classList.toggle('hidden');
            closeOtherPanels('appDownloadPanel');
        }

        function downloadAndroidApp() {
            // 模拟Android APK下载
            const link = document.createElement('a');
            link.href = 'https://example.com/starwave-player-android.apk';
            link.download = '星澜播放器-Android.apk';
            link.style.display = 'none';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            alert('Android APK下载已开始！');
        }

        function downloadIOSApp() {
            // 跳转到App Store
            window.open('https://apps.apple.com/app/starwave-player/id123456789', '_blank');
        }

        function downloadWindowsApp() {
            // 模拟Windows客户端下载
            const link = document.createElement('a');
            link.href = 'https://example.com/starwave-player-windows.exe';
            link.download = '星澜播放器-Windows.exe';
            link.style.display = 'none';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            alert('Windows客户端下载已开始！');
        }

        function downloadMacApp() {
            // 模拟macOS客户端下载
            const link = document.createElement('a');
            link.href = 'https://example.com/starwave-player-mac.dmg';
            link.download = '星澜播放器-macOS.dmg';
            link.style.display = 'none';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            alert('macOS客户端下载已开始！');
        }

        function installPWA() {
            // 检查是否支持PWA安装
            if ('serviceWorker' in navigator && 'BeforeInstallPromptEvent' in window) {
                // 触发PWA安装提示
                alert('正在准备安装PWA应用...\n\n请按照浏览器提示完成安装！');
                
                // 这里可以添加实际的PWA安装逻辑
                if (window.deferredPrompt) {
                    window.deferredPrompt.prompt();
                    window.deferredPrompt.userChoice.then((choiceResult) => {
                        if (choiceResult.outcome === 'accepted') {
                            alert('PWA应用安装成功！');
                        }
                        window.deferredPrompt = null;
                    });
                } else {
                    // 如果浏览器不支持自动安装，提供手动指导
                    alert('请按以下步骤安装：\n1. 点击浏览器菜单\n2. 选择"安装应用"或"添加到主屏幕"\n3. 完成安装');
                }
            } else {
                alert('您的浏览器不支持PWA安装，请下载对应平台的客户端。');
            }
        }

        // 视频事件监听
        function setupVideoEvents() {
            const video = document.getElementById('videoPlayer');
            const audio = document.getElementById('audioPlayer');
            
            const handleEnded = () => {
                if (currentPlaylistIndex < playlist.length - 1) {
                    playNext();
                }
            };
            
            const handleError = (e) => {
                console.error('媒体加载错误:', e);
                alert('媒体加载失败，请检查网络连接或URL格式');
            };
            
            video.addEventListener('ended', handleEnded);
            video.addEventListener('error', handleError);
            audio.addEventListener('ended', handleEnded);
            audio.addEventListener('error', handleError);
        }

        // 键盘快捷键
        document.addEventListener('keydown', (e) => {
            const video = document.getElementById('videoPlayer');
            
            switch(e.key) {
                case ' ':
                    e.preventDefault();
                    video.paused ? video.play() : video.pause();
                    break;
                case 'ArrowLeft':
                    e.preventDefault();
                    seekVideo(-5);
                    break;
                case 'ArrowRight':
                    e.preventDefault();
                    seekVideo(5);
                    break;
                case 'f':
                    e.preventDefault();
                    toggleFullscreen();
                    break;
            }
        });
    </script>
</body>
</html>
